<template>
  <div class="edit-div">
    <div class="page-title">
      课程管理  > 课程详情  > 课程编辑
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label">章节名称：</span>
      <el-input v-model="data.chapter_name" ></el-input>
    </div>
    <div class="demo-input-suffix">
      <span class="form-input-label">编辑器：</span>
      <el-radio v-for="(d, i) in chapter_detail_types" :key="'chapter-detail' + i " v-model="data.detail_type" :label="d.value">{{d.label}}</el-radio>
    </div>
    <div class="demo-input-suffix">
      <ckeditor v-if="data.detail_type == 'H'" :editor="editor" v-model="data.detail" :config="editorConfig"></ckeditor>
      <MarkdownPro v-if="data.detail_type == 'M'" v-model="data.detail" />
      <input v-if="data.detail_type == 'V'" type="file" @change="onFileChange" accept="video/*,.mkv" style="width:200px" id="video" />
      <el-button type="primary" @click="onUpVideo" v-if="data.detail_type=='V'">上传视频</el-button>
      <video v-if="data.detail_type == 'V' && data.attach_url" controls controlslist="nodownload" width="250">
          <source :src="data.attach_url" type="video/webm">
          <source :src="data.attach_url" type="video/mp4">
          <source :src="data.attach_url" type="video/mov">
          <source :src="data.attach_url" type="video/wav">
          <source :src="data.attach_url" type="video/mkv">
          Sorry, your browser doesn't support embedded videos.
      </video>
      <input v-if="data.detail_type == 'P'" type="file" @change="onFileChange" accept=".pdf" style="width:200px" id="upload-ppt" />
      <div>
        <el-button type="primary" @click="onUpPpt" v-if="data.detail_type=='P'">上传PDF</el-button>
        <el-progress class="upload-progress" v-if="uploading" :text-inside="true" :stroke-width="26" :percentage="uploadPercentage"></el-progress>   
        {{speed}}
      </div>
      <div style="margin-top: 20px;">
        <iframe v-if="data.detail_type == 'P' && prev_file"
           :src="prev_file"
           width="1024"
           height="768">
       </iframe>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="onSubmit">保 存</el-button>
      <el-button @click="onCancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { courseModel } from "@/api/models";
import { Message } from "element-ui";
import editorMixin from '@/mixins/editorMixin.js';
import selects from '@/common/selects.js';
import cosMixin from '@/mixins/cosMixin.js'
import { cosModel } from '../api/models';
export default {
  mixins: [editorMixin, cosMixin],
  data() {
    return {
      id: null,
      data: {
        detail_type: 'H',
        attach_url: null,
        course_id: null
      },
      chapter_detail_types: selects.chapter_detail_types,
      prev_file: ''
    };
  },
  mounted() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
      this.getItem();
    }
    if (this.$route.query.course_id) {
      this.data.course_id = parseInt(this.$route.query.course_id)
    }
  },
  methods: {
    getItem() {
      courseModel.chapter(this.id, res => {
        this.data = res.data;
        this.prev_file = res.data.attach_url
      });
    },
    onUpVideo() {
      document.getElementById('video').click()
    },
    onUpPpt() {
      document.getElementById('upload-ppt').click()
    },
    onSubmit() {
      let d = this.data;
      if (
        !d.detail || !d.chapter_name
      ) {
        return Message.warning("请填完整信息");
      }
      if (this.id) {
        courseModel.chapterUpdate(this.id, this.data, res=>{
          Message.success(res.message)
          this.$router.go(-1)
        }, err => {
          Message.warning(err.message)
        })
      }else{
        // create
        courseModel.chapterAdd(this.data, res => {
          Message.success(res.message)
          this.$router.go(-1)
        }, err => {
          Message.warning(err.message)
        })
      }

    },
    onCancel() {
      this.$router.go(-1);
    },
    onFileChange(e) {
      console.log(e)
      this.onUpload('course', e.target.files[0], res =>{
        console.log(res)
        this.data.detail = res.Key
        cosModel.getSign({key: res.Key}, res1 => {
          this.prev_file = res1.data
        })
      }, err => {
        Message.warning('文件上传失败：' + err)
      })
    }
  }
};
</script>
<style scoped lang="scss">
  .edit-chapter{
    text-align: left;
  }
  .ck.ck-editor{
    width: 80%;
  }
  .footer{
    margin-top: 20px;
  }
  #video, #upload-ppt{
    display: none;
  }

</style>